<template>
	<div id="Login">
		<div class="Login-form">
			<t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true" :labelWidth="0">
				<div class="text-4xl font-extralight mb-2 text-gray-900">工作辛苦了(=￣ω￣=)</div>
				<div class="Login-title">欢迎登录贝德米OA</div>
				<div class="Login-phone">手机号</div>
				<t-form-item name="account">
					<t-input 
					clearable 
					v-model="formData.phone" 
					placeholder="请输入手机号"
					:status="statusPhone"
					:tips="tipsPhone"
					:onBlur="onPhone"
					size="large"
					>
						<mobile-icon slot="prefix-icon"></mobile-icon>
					</t-input>
				</t-form-item>
				<div class="Login-password">密码</div>
				<t-form-item name="password">
					<t-input 
					type="password" 
					clearable v-model="formData.password" 
					placeholder="请输入密码"
					:status="statusPassword"
					:tips="tipsPassword"
					:onBlur="onPassword"
					size="large"
					>
						<lock-on-icon slot="prefix-icon"></lock-on-icon>
					</t-input>
				</t-form-item>
				<t-form-item>
					<t-button theme="primary" type="submit" block size="large">
						登录
					</t-button>
				</t-form-item>
			</t-form>
		</div>
	</div>
</template>

<script>
	import { MobileIcon, LockOnIcon } from 'tdesign-icons-vue'
	import { isvalidPhone, isPasswd } from '@/unit'

	export default {
		name: 'Login',
		components: {
			MobileIcon,
			LockOnIcon,
		},
		data() {
			return {
				formData: {
					phone: '',
					password: '',
				},
				statusPhone:'',
				tipsPhone: '',
				statusPassword: '',
				tipsPassword: ''
			};
		},
		methods: {
			onReset(){
				this.$message.success('重置成功');
			},
			// 手机校验
			onPhone(){
				if (isvalidPhone(this.formData.phone)){
					this.statusPhone = ''
					this.tipsPhone = ''
				} else {
					if (this.formData.phone === '') {
						this.statusPhone = ''
						this.tipsPhone = ''
					} else {
						this.statusPhone = 'error'
						this.tipsPhone = '非合法手机号'
					}
				}
			},
			//密码校验
			onPassword(){
				if (isPasswd(this.formData.password)){
					this.statusPassword = ''
					this.tipsPassword = ''
				} else {
					if (this.formData.password === '') {
						this.statusPassword = ''
						this.tipsPassword = ''
					} else {
						this.statusPassword = 'error'
						this.tipsPassword = '请输入包含6-20个字母、数字、下划线的密码'
					}
				}
			},
			//点击登录业务
			onSubmit(){
				if (isvalidPhone(this.formData.phone) && isPasswd(this.formData.password)){
					this.$loading(true);
					this.$store.dispatch('user/startLogin', {
						phone: this.formData.phone,
						password: this.formData.password
					}).then((res) => {
						if (res.status === 0){
							this.$loading(false)
							this.$message.success(res.message)
							this.$router.push({name: 'home'})
						} else {
							this.$loading(false)
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.error('请输入合法的手机号或密码')
				}
			}
		}
	};
</script>

<style scoped lang="less">
	#Login {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
		background: url(https://oa.chimeng.xyz/images/background/login-bj.png);
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		.Login-form {
			width: 380px;
			height: 380px;
			margin-left: 500px;
			.Login-title {
				font-weight: 400;
				color: #999;
				margin-bottom: 32px;
			}
			.Login-phone {
				color: #999;
				margin-bottom: 16px;
			}
			.Login-password {
				color: #999;
				margin: 24px 0 16px 0;
			}
		}
	}
</style>